<template>
  <view class="item-box" :style="{ padding }" @click.stop.prevent="onClickItem">
    <text class="item-text" :style="{ color: newColor, fontSize }">{{ child.label }}</text>
    <view v-if="showSelectedIcon" class="icon-box" :style="{ opacity: isSelected ? 1 : 0 }">
      <mxp-icon name="dui" :color="activeColor" :size="fontSize"></mxp-icon>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { type PropType, computed } from 'vue';
  import type { $AllColorStr, $SizeUnitArr4Str, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import type { $IndexListChildItem } from '../../mxp-index-list.vue';
  import { lightenDarkenColorStorage } from '../../../mxp-tool/utils/color';
  import MxpIcon from '@/mxp-ui/mxp-icon/mxp-icon.vue';
  defineOptions({
    name: 'list-item',
  });

  const props = defineProps({
    /** 显示的内容 */
    child: { type: Object as PropType<$IndexListChildItem>, required: true },
    /** 选项的文字颜色 */
    color: { type: String as PropType<$AllColorStr>, required: true },
    /** 选项的文字文字大小 */
    fontSize: { type: String as PropType<$SizeUnitStr>, required: true },
    /** 每个子选项列表的边距 如：'10rpx 20rpx' 或者 '10rpx'等等 */
    padding: { type: String as PropType<$SizeUnitArr4Str>, required: true },
    /** 选中的的文字颜色 */
    activeColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 当前index */
    index: { type: Number, required: true },
    /** 选中的值 */
    selectedList: { type: Array as PropType<unknown[]>, required: true },
    /** 禁止点击的值（那些值禁止选中或取消选中） */
    disabledList: { type: Array as PropType<unknown[]>, required: true },
    /** 选中时是否显示勾选的图标 */
    showSelectedIcon: { type: Boolean, required: true },
  });
  const emits = defineEmits<{
    (e: 'itemClick', item: $IndexListChildItem, index: number): void;
  }>();

  const isSelected = computed(() => props.selectedList.includes(props.child.value));
  const isDisabled = computed(() => props.disabledList.includes(props.child.value));
  const newColor = computed(() => {
    const col = isSelected.value ? props.activeColor : props.color;
    return isDisabled.value ? lightenDarkenColorStorage(col, 0.8) : col;
  });
  /**
   * 点击事件
   */
  function onClickItem() {
    if (!isDisabled.value) {
      emits('itemClick', props.child, props.index);
    }
  }
</script>

<style lang="scss" scoped>
  .item-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;

    .item-text {
      display: flex;
      flex: 1;
      font-size: 14px;
      transition: color 0.3s;
    }

    .icon-box {
      margin-left: 8px;
      transition: opacity 0.3s;
    }
  }
</style>
